<template>
  <div class="pet">
    <van-nav-bar
      title="宠物信息"
      left-arrow
      right-text="保存"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      @click="handleClick"
    />
    <router-link :to="{ path: '/main/mine' }" tag="text" class="jiantou"
      >1</router-link
    >

    <div class="touxiang">
      <img src="../img/touxiang.webp" alt="" />
    </div>
    <div class="form1">
      <van-cell-group inset>
        <van-field
          v-model="state.text"
          label="昵称"
          placeholder="请填写宠物昵称"
        />
        <van-field
          v-model="state.sex"
          type="sex"
          label="性别"
          placeholder="请选择性别"
        />
        <van-field
          v-model="state.text1"
          type="text"
          label="品种"
          placeholder="请选择宠物品种"
        />
        <van-field
          v-model="state.number"
          type="number"
          label="出生日期"
          placeholder="请选择宠物出生日期"
        />
        <van-field
          v-model="state.number1"
          type="number"
          label="到家时间"
          placeholder="请选择宠物到家时间"
        />
        <van-field
          v-model="state.text2"
          type="text"
          label="绝育"
          placeholder="请选择绝育情况"
        />
      </van-cell-group>
    </div>
    <div class="form2">
      <van-cell-group inset>
        <van-field v-model="value" label="应答语" />
        <!--       <button @click="GetClick" class="get">提交</button> -->
      </van-cell-group>
    </div>
    <!--  -->
  </div>
</template>

<script>
import { ref } from "vue";
import { Toast } from "vant";
import { reactive } from "vue";
import http from "../utils/api";
export default {
  setup() {
    const value = ref("");
    const onClickLeft = () => Toast("返回");
    const onClickRight = () => Toast("按钮");
    const arr = ref();
    const state = reactive({
      tel: "",
      text: "",
      text1: "",
      text2: "",
      digit: "",
      number: "",
      number1: "",
    });

    const handleClick = () => {
      console.log(state.text);
      http
        .isPetsUploadpetApi({
          token: "12345",
          phone: "13344556677",
          nickname: state.text,
          sex: state.sex,
          breed: state.text1,
          birth: state.number,
          gohome: state.number1,
          ster: 1,
          reply: "旺财",
        })
        .then((res) => {
          console.log(res.data);
        });
    };

    /*   const GetClick = () => {
      http
        .isGetpetApi({
          token: "12345",
          phone: "123",
        })
        .then((res) => {
          console.log(res.data);
          // arr.value = res.data.data.classify;
          // console.log(arr.value);
        });
    }; */

    return {
      value,
      onClickLeft,
      onClickRight,
      state,
      handleClick,
      arr,
    };
  },
};
</script>
<style lang="less">
.pet {
  width: 100%;
  position: relative;
  .van-nav-bar__arrow {
    color: #575757;
    margin-top: 11px;
  }
  .jiantou {
    position: absolute;
    left: 15px;
    top: 8px;
    z-index: 99;
    color: transparent;
  }
  .van-nav-bar {
    position: relative;
  }

  .van-nav-bar__title {
    width: 134px;
    height: 33px;
    font-size: 17px;
    text-align: center;
    line-height: 33px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .van-nav-bar__text {
    width: 66px;
    height: 32px;
    font-size: 17px;
    line-height: 32px;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 500;
    color: #a1a1a1;
  }
  .touxiang {
    width: 78px;
    height: 72px;
    margin: 0 auto;
    margin-top: 33px;
    margin-bottom: 33px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-cell-group {
    width: 100%;
    margin: 0 auto;
  }

  .form1 span {
    width: 130px;
    height: 32px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #9b9b9b;
  }
  .form2 {
    margin-top: 10px;
  }
  .form2 span {
    width: 100px;
    height: 32px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #060d13;
  }
}
van-search {
  width: 200px;
  height: 200px;
  background: pink;
}
::-webkit-input-placeholder {
  text-align: right;
}
.form2 {
  position: relative;
}
.get {
  position: absolute;
  top: 60px;
  right: 50px;
  width: 70px;
  height: 35px;
  border-radius: 12px;
  border-color: lightgrey;
  color: lightslategray;
  font-size: 20px;
}
</style>
